<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	
	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Dynamic Focus Demo</h1>
		<div class="entry">
			<p>By default, the first input field receives focus automatically. It can be changed by using focus attribute.</p>

            <h:form id="form">		
				<p:commandButton id="dynamicDialogButton" value="Dynamic Focus" onclick="PF('dlg').show();" type="button" icon="ui-icon-extlink"/> 
	
				<p:dialog id="dialog" header="Dynamic Focus" widgetVar="dlg" focus="surname">
					
						<h:panelGrid columns="2" cellpadding="5">
							<h:outputLabel for="name" value="Name:" />
							<p:inputText id="name" label="name" />
							
							<h:outputLabel for="surname" value="Surname:" />
							<p:inputText id="surname" label="surname" />
							
                            <h:outputLabel for="telephone" value="Telephone:" />
							<p:inputText id="telephone" label="telephone" />
							
						</h:panelGrid>						
					
				</p:dialog>
				</h:form>
				<h3>Source</h3>
				<p:tabView>
					<p:tab title="dialogFocus.xhtml">
				<pre name="code" class="xml">
&lt;h:form&gt;
    &lt;p:commandButton id="dynamicDialogButton" value="Dynamic Focus" onclick="PF('dlg').show();" type="button" 
                     icon="ui-icon-extlink"/&gt;

    &lt;p:dialog id="dialog" header="Dynamic Focus" widgetVar="dlg" focus="surname"&gt;

		&lt;h:panelGrid columns="2" cellpadding="5"&gt;

			&lt;h:outputLabel for="name" value="Name:" /&gt;
			&lt;p:inputText id="name" label="name" /&gt;
			
			&lt;h:outputLabel for="surname" value="Surname:" /&gt;
			&lt;p:inputText id="surname" label="surname" /&gt;
				
            &lt;h:outputLabel for="telephone" value="Telephone:" /&gt;
            &lt;p:inputText id="telephone" label="telephone" /&gt;
	
		&lt;/h:panelGrid&gt;
		
    &lt;/p:dialog&gt;
&lt;/h:form&gt;
				</pre>	
					</p:tab>

				</p:tabView>
		</div>
				
	</ui:define>
</ui:composition>